<template>
  <div class="home">
    <scroll-view
      class="scrollview"
      :scroll-y="true"
      @scrolltolower="scrolltolower"
    >
      <div class="header">
        <!--  <u-search
          placeholder="走进艺术宫"
          :showAction="false"
          :disabled="true"
          v-model="searchValue"
          @click="onSearchClick"
        ></u-search> -->
        <image
          class="header-bg"
          src="https://ysgapi.yfzxzjysg.top/bg.png"
          mode=""
        />
        <div class="searchList">
          <!-- <div class="search-item">海阔天空</div>
          <div class="search-item">海阔天空</div>
          <div class="search-item">海阔天空</div>
          <div class="search-item">海阔天空</div>
          <div class="search-item">海阔天空</div>
          <div class="search-item">海阔天空</div> -->
        </div>
      </div>
      <div class="list">
        <!-- 列表 -->
        <div
          class="list-item"
          v-for="item in list"
          :key="item.id"
          @click="onDetail(item.id)"
        >
          <div class="left-image">
            <image :src="item.cover" mode="aspectFill" />
          </div>
          <div class="right">
            <view>
              <div class="title">{{ item.name }}</div>
              <div class="desc">
                {{ item.content }}
              </div>
            </view>
            <view>
              <div class="title">课程时间</div>
              <div class="desc">
                {{ item.mark_start_time }}-{{ item.mark_end_time }}
              </div>
            </view>
            <view>
              <div class="title">地址</div>
              <div class="desc">
                {{ item.address }}
              </div>
            </view>
          </div>
        </div>
        <u-empty mode="data" v-if="list.length <= 0" text="数据为空"></u-empty>
      </div>
    </scroll-view>
    <u-modal
      :show="show"
      @confirm="confirm"
      @cancel="cancel"
      confirmText="去登录"
      :showCancelButton="true"
      ref="uModal"
      title="提示"
      content="同学，想要看更多内容请先去登录！"
      :asyncClose="true"
    ></u-modal>
  </div>
</template>

<script>
import { get_activity } from "@/apis/modules/user";
import { getStorage } from "@/utils/auth";
import { parseTime } from "@/utils/index.js";
export default {
  name: "offline",
  data() {
    return {
      show: false,
      typeList: [],
      searchValue: "",
      list: [],
      isMore: false,
      page: 1,
      pageSize: 10,
      cate_id: "",
    };
  },
  onShow() {
    this.page = 1;
    this.courseList();
  },
  methods: {
    scrolltolower() {
      if (this.isMore) {
        return false;
      }
      this.page++;
      this.courseList();
    },
    courseList() {
      let data = {
        page: this.page,
        limit: this.pageSize,
        school_id: getStorage("school_id"),
        cate_id: getStorage("cate_id") || this.cate_id,
      };
      get_activity(data).then((result) => {
        console.log(result);
        result = result.map((item) => {
          item["mark_start_time"] = parseTime(
            item["mark_start_time"] * 1000,
            `{y}年{m}月{d}日 {h}:{i}:{s}`
          );
          item["mark_end_time"] = parseTime(
            item["mark_end_time"] * 1000,
            `{y}年{m}月{d}日 {h}:{i}:{s}`
          );
          return item;
        });
        if (data.page == 1) {
          this.list = result;
        } else {
          this.list = this.list.concat(result);
        }
        this.isMore = result.length <= 0;
      });
    },
    onDetail(course_id) {
      let token = !!getStorage("token");
      if (token) {
        this.$Router.push({
          path: `/pagesA/offlineDetail/offlineDetail?course_id=${course_id}`,
        });
      } else {
        this.show = true;
      }
    },
    confirm() {
      this.$Router.push({
        path: "/pages/login/login",
      });
      setTimeout(() => {
        this.show = false;
      }, 500);
    },
    cancel() {
      this.show = false;
    },
    onSearchClick() {
      this.$Router.push({
        path: "/searchPage",
      });
    },
  },
};
</script>
<style lang="scss">
.home {
  height: 100vh;
  .scrollview {
    height: 100%;
    overflow: hidden;
    background: #eeeeee;
  }
  .header {
    padding: 180rpx 40rpx 40rpx;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden;
    &::after {
      content: "欢迎进入      走进艺术宫";
      position: absolute;
      top: 70rpx;
      left: 40rpx;
      width: 110rpx;
      color: #fff;
      font-size: 22rpx;
    }
    .header-bg {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .searchList {
      display: flex;
      overflow-x: auto;
      align-items: center;
      padding: 20rpx;
      height: 85rpx;
      .search-item {
        flex-shrink: 0;
        width: 200rpx;
        height: 85rpx;
        text-align: center;
        line-height: 85rpx;
        color: #fff;
        margin-right: 20rpx;
        font-size: 24rpx;
        border-radius: 18rpx;
        background: rgba(192, 190, 190, 0.35);
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
      }
    }
  }
  .list {
    background: #fff;
    margin: 30rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    .type {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 20rpx;
      &-item {
        margin-right: 70rpx;
        font-size: 24rpx;
        color: #666666;
        font-weight: bold;
        padding: 0 10rpx;
      }
    }
    .list-item {
      overflow: hidden;
      border-radius: 18rpx;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
      display: flex;
      margin-bottom: 30rpx;
      .left-image {
        width: 300rpx;
        flex-shrink: 0;
        height: 350rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
        padding: 20rpx 30rpx;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        .title {
          height: 42rpx;
          font-size: 30rpx;
          font-weight: 800;
        }
        .desc {
          min-height: 40rpx;
          margin-bottom: 20rpx;
          line-height: 1.5;
          font-size: 24rpx;
          color: #666666;
          width: 266rpx;
          font-weight: 500;
          overflow: hidden; /*隐藏多出部分文字*/
          text-overflow: ellipsis; /*用省略号代替多出部分文字*/
          display: -webkit-box; /* 显示多行文本容器 */
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; /*显示行数*/
        }
      }
    }
  }
}
</style>
